<template>
    <div class="selects">
        <el-select @change="SetData" style="flex:1;margin-right:6px;" v-model="DistributeForm.distributeCondition.fieldName"
            placeholder="请选择">
            <el-option v-for="i in Category" :key="i.fieldName" :label="i.displayName" :value="i.fieldName">
            </el-option>
        </el-select>
        <!-- 根据字段类型显示不同运算符 -->
        <el-select style="flex:1;margin:0 6px;" v-model="DistributeForm.distributeCondition.equals" placeholder="请选择">
            <el-option v-for="i in equalsMaps" :key="i.value" :label="i.label" :value="i.value">
            </el-option>
        </el-select>
        <!-- 选择框 -->
        <el-select v-if="find.type === 'select' || !find.type" style="flex:1;margin-right:6px;"
            v-model="DistributeForm.distributeCondition.option" placeholder="请选择">
            <el-option v-for="i in options" :key="i" :label="i" :value="i">
            </el-option>
        </el-select>
        <!-- 输入框 -->
        <el-input style="flex:1;margin-right:6px;" v-if="find.type === 'input'"
            v-model="DistributeForm.distributeCondition.option" />
        <!-- 省市区选择 -->
        <base-dist v-if="find.type === 'dist'" :value="DistributeForm.distributeCondition.option.split(',')" style="flex:1;margin-right:6px;" @input="DistInput" />
        <biz-team-select style="flex:1;margin-right:6px;" v-if="find.type === 'Department'" collapse multiple placeholder='请选择部门'
            :value="DistributeForm.distributeCondition.option" @input="handlerTeamChange" />
    </div>
</template>
<script>
    export default {
        name: "imSettingChoice",
        props: {
            // 筛选类目
            Category: [Object, Array],
            // 筛选数据
            Rules: Object,
            // 保存数据
            DistributeForm: Object,
            // 选中的数据
            find: [Object, Array],
            options: Array,
            equalsMaps:Array
        },
        data() {
            return {
            }
        },
        methods: {
            DistInput(value) {
                this.DistributeForm.distributeCondition.option = value.join(',')
            },
            handlerTeamChange(value) {
                console.log(value)
            },
            SetData(item) {
                this.DistributeForm.distributeCondition.equals= ''
                if (['serviceTag'].includes(item)) {
                    this.DistributeForm.distributeCondition.option = []
                } else {
                    this.DistributeForm.distributeCondition.option = ''
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .selects {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
</style>